<template>
	<div class="item between mb-16 py-28 px-24 rounded-22" 
		:class="{'item-1n':index%4==1,'item-2n':index%4==2,'item-3n':index%4==3,'item-4n':index%4==0}">
		<div class="icon w-65 h-65  center">
			<image src="/static/rank/t1.png" v-if="index==1" mode="widthFix" class="w-full"></image>
			<image src="/static/rank/t2.png" v-else-if="index==2" mode="widthFix" class="w-full"></image>
			<image src="/static/rank/t3.png" v-else-if="index==3" mode="widthFix" class="w-full"></image>
			<div class="font-bold fz40" v-else style="font-style: italic;color: #666;">
				{{index}}
			</div>
		</div>
		<div class="flex " style="width: 450rpx;">
			<div class="icon w-90 h-90 avatar flex-shirnk-0">
				<image :src="item.me_img" mode="aspectFill" class="w-full h-full rounded-50"></image>
			</div>
			<div class="ml-20">
				<div class="flex">
					<!-- <image src="/static/rank/x-tx.png" mode="widthFix" class="w-80"></image> -->
					<div class="text-white font-bold" :style=" { background: 'url('+item.ph_bj_url+')' }"
						style="padding: 10rpx 15rpx; font-size: 24rpx;background-size: 100% 100%;border-radius: 10rpx;">{{item.label_name}}
					</div>
					<div class="fz24 text-gray-16 ml-8">
						{{item.me_nick_name}}
					</div>

				</div>
				<div class="fz20 text-gray-a4 mt-10">发布时间：{{item.add_time}}</div>
			</div>
		</div>
		<div class="text-purple fz32 font-bold flex-shirnk-0 w-120" style="text-align: right;">{{item.seek_money}}</div>
	</div>
</template>

<script>
	export default {
		props: ["index", "item"]
	}
</script>

<style>
	.item-1n {
		background-color: #FFFBF0 !important;
	}

	.item-2n {
		background-color: #F6F0FF !important;
	}

	.item-3n {
		background-color: #FFF0FB !important;
	}

	.item-4n {
		background-color: #F0FFFE !important;
	}
</style>